<template>
  <!-- swiper组件 -->
  <swiper navigation :pagination="{ clickable: true }" loop autoplay>
    <swiper-slide v-for="carousel of list" :key="carousel.id">
      <img :src="carousel.imgUrl" />
    </swiper-slide>
  </swiper>
</template>

<script setup>
import { defineProps } from 'vue'
// 引入swiper 组件
import { Swiper, SwiperSlide } from 'swiper/vue'
/**
 * 引入swiper模块
 * Navigation- 导航模块
 * Pagination- 分页模块
 */
import SwiperCore, { Navigation, Pagination, Autoplay } from 'swiper'
SwiperCore.use([Navigation, Pagination, Autoplay])

// 接收传递过来的数据
defineProps({
  list: {
    type: Array,
    required: true
  }
})
</script>
<style lang="scss" scoped></style>
